/* Footer
=================================================================== */
footer {
	border-top: 1px solid @border;
	color: @border;
	min-height: 30px;
	line-height: 30px;
	padding: 0 20px 0 @sidebar-width + 20px;
	margin: 0;
	position: relative;
	z-index: 1;
	font-size: 10px;
	
	a {
		color: @border;
		font-weight: bold;
	}
}

#usage {
	background: #eeeeee;
	background: -webkit-linear-gradient(#f8f8f8, #eeeeee);
	background: -o-linear-gradient(#f8f8f8, #eeeeee);
	background: -moz-linear-gradient(#f8f8f8, #eeeeee);
	background: linear-gradient(#f8f8f8, #eeeeee);
	position: fixed;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	border-top: 1px solid #afafaf;
	.box-shadow(0 -2px 1px -1px rgba(0,0,0,.05));
	padding-left: @sidebar-width;
	
	ul {
		padding: 0;
		margin: 0;
		font-size: 0;
		line-height: 40px;
		
		li {
			display: inline-block;
			height: 40px;
			width: 20%;
			font-size: 10px;
			border-right: 1px solid #afafaf;
					
			&:last-child {
				border-right: none !important;
			}

			.title, .bar, .desc { display: inline-block; width: 30%; float: left; padding: 0 5px;}
			
			.title {
				font-weight: 700;
				text-align: right;
				width: 20%
			}
			
			.text { 
					width: 100%; 
					padding: 0 15px;
					float: left;
					
					b {
						font-weight: 700;
					} 
			}
			
			.bar {
				width: 50%;
				
				.progress {
					height: 10px;
					margin-top: 15px;
					.border-radius(2px);
				}
			}	
		}
	}
}

body.hidden-usage {
	footer {
		padding-bottom: 0;
	}

	#usage {
		display: none;
	}
}